<template>
  <div>
    <curd-title v-if="infoFlg" :required="!['view'].includes(this.type)" :title="'主要联系人信息'" />
    <avue-crud
      :table-loading="loading"
      :option="option"
      :data="contactList"
      @on-load="onLoad"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @refresh-change="refreshChange"
      @row-del="handleDelete"
      :row-class-name="delRowClassName"
    >
      <template slot="contactName" slot-scope="scope">
        <div v-if="slotFlg">
          <del v-if="scope.row.contactNameFlag === '1'">{{ scope.row.contactName }}</del>
          {{ scope.row.contactNameA }}
        </div>
        <span v-else>{{ scope.row.contactName }}</span>
      </template>
      <template slot="sex" slot-scope="scope">
        <div v-if="slotFlg">
          <del v-if="scope.row.sexFlag === '1'">{{ scope.row.sex }}</del>
          {{ scope.row.sexA }}
        </div>
        <span v-else>{{ scope.row.sex }}</span>
      </template>
      <template slot="sex" slot-scope="scope">
        <div v-if="slotFlg">
          <del v-if="scope.row.sexFlag === '1'">{{ scope.row.sex }}</del>
          {{ scope.row.sexA }}
        </div>
        <span v-else>{{ scope.row.sex }}</span>
      </template>
      <template slot="dept" slot-scope="scope">
        <div v-if="slotFlg">
          <del v-if="scope.row.deptFlag === '1'">{{ scope.row.dept }}</del>
          {{ scope.row.deptA }}
        </div>
        <span v-else>{{ scope.row.dept }}</span>
      </template>
      <template slot="post" slot-scope="scope">
        <div v-if="slotFlg">
          <del v-if="scope.row.postFlag === '1'">{{ scope.row.post }}</del>
          {{ scope.row.postA }}
        </div>
        <span v-else>{{ scope.row.post }}</span>
      </template>
      <template slot="phone" slot-scope="scope">
        <div v-if="slotFlg">
          <del v-if="scope.row.phoneFlag === '1'">{{ scope.row.phone }}</del>
          {{ scope.row.phoneA }}
        </div>
        <span v-else>{{ scope.row.phone }}</span>
      </template>
      <template slot="email" slot-scope="scope">
        <div v-if="slotFlg">
          <del v-if="scope.row.emailFlag === '1'">{{ scope.row.email }}</del>
          {{ scope.row.emailA }}
        </div>
        <span v-else>{{ scope.row.email }}</span>
      </template>
      <template slot="telephone" slot-scope="scope">
        <div v-if="slotFlg">
          <del v-if="scope.row.telephoneFlag === '1'">{{ scope.row.telephone }}</del>
          {{ scope.row.telephoneA }}
        </div>
        <span v-else>{{ scope.row.telephone }}</span>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { contactOption } from '@/option/tenant/supplier/contacts-info'
import CurdTitle from '@/components/base/title'
import { getList, add, update, remove } from '@/api/supplier/contact'
import { getStore } from '@/util/store'
import delRowClassName from '@/views/plugin/workflow/mixins/info'
export default {
  name: 'ContactsInfo',
  components: { CurdTitle },
  inject: {
    type: {
      default: 'view'
    },
    infoFlg: {
      default: true
    },
    slotFlg: {
      default: false
    }
  },
  mixins: [delRowClassName],
  mounted() {
    console.log(this.slotFlg)
  },
  data() {
    return {
      loading: false,
      supplierId: getStore({ name: 'supplierId' }),
      contactList: [],
      option: { ...contactOption.call(this), operatingButtons: this.getOperatingButtons }
    }
  },
  methods: {
    getOperatingButtons(row) {
      const drop = { text: '删除', callback: this.handleDelete }
      if (row.row.$index !== 0) {
        return [drop]
      } 
    },
    refreshChange() {
      this.onLoad()
      console.log(this.infoFlg)
    },
    onLoad() {
      this.infoFlg
        ? ((this.loading = true),
          getList({ supplierId: this.supplierId }).then(res => {
            this.contactList = res.data.data
            this.loading = false
          }))
        : 'xx'
    },
    rowSave(row, done, loading) {
      add({ ...row, supplierId: this.supplierId }).then(
        () => {
          this.onLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    handleDelete(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
    }
  }
}
</script>

<style></style>
